<template>
    <div>
        <cvue-dialog
        :dialogVisible='dialogVisible'
        title='学生证设备状态'
        :isShowFoot='true'
        dialogWidth='50%'
        @handleOpen='getDetail'
        @closeDialog='closeDialog'
        @confirmDialog='confirmDialog'
        @handleClose='closeDialog'>
            <div class="dialog-body" slot="dialogBody">
                <div class="tr">
                    <div class="td">
                        <div class="td-k">学生姓名：</div>
                        <div class="td-v">王小胖</div>
                    </div>
                    <div class="td">
                        <div class="td-k">班级：</div>
                        <div class="td-v">三年级2班</div>
                    </div>
                </div>
                <div class="tr">
                    <div class="td">
                        <div class="td-k">学生证号：</div>
                        <div class="td-v">645267645324</div>
                    </div>
                    <div class="td">
                        <div class="td-k">在线状态：</div>
                        <div class="td-v">
                            在线
                            <el-button @click="toLocation" type="primary">立即定位</el-button>
                            
                        </div>
                    </div>
                </div>
                <div class="tr">
                    <div class="td">
                        <div class="td-k">固件版本：</div>
                        <div class="td-v">645267645324</div>
                    </div>
                   
                </div>
                <div class="tr">
                    <div class="td-1">
                        <div class="td-k-1">上课时间禁用</div>
                        <el-switch
                            v-model="a"
                            >
                        </el-switch>
                    </div>
                    <div class="td-1">
                        <div class="td-k-1">语音通话功能</div>
                        <el-switch
                            v-model="a"
                            >
                        </el-switch>
                    </div>
                    <div class="td-1">
                        <div class="td-k-1">流量功能</div>
                        <el-switch
                            v-model="a"
                            >
                        </el-switch>
                    </div>
                </div>

                <el-tabs type="border-card" class="tab-p">
                    <el-tab-pane label="套餐信息">
                        <packageDetail></packageDetail>
                    </el-tab-pane>
                    <el-tab-pane label="亲情号码">
                        <familyNum></familyNum>
                    </el-tab-pane>
                    <el-tab-pane label="SOS号码">
                        <sosNum></sosNum>
                    </el-tab-pane>
                </el-tabs>

            </div>
        </cvue-dialog>

         <div>
                                <location :dialogVisible="locationVisible" @close="locationVisible = false"></location>
                            </div>
    </div>
</template>
<script>
import cvueDialog from '@/components/cvue-dialog'
import packageDetail from './packageDetail'
import familyNum from './familyNum'
import sosNum from './sosNum'
import location from './location'
export default {
    components: {
        cvueDialog, packageDetail, familyNum, sosNum, location
    },
    props: {
        dialogVisible: {
            type: Boolean,
            default: false
        }
    },
    data () {
        return {
            a: '',
            locationVisible: false
        }
    },
    methods: {
        getDetail () {

        },
        closeDialog () {
            this.$emit('close')
        },
        confirmDialog () {
            this.closeDialog()
        },
        toLocation () {
            this.locationVisible = true
        }
    }
}
</script>
<style scoped>
.tr{
    padding: 0 0 20px 0;
}
.td{
    display: inline-block;
    vertical-align: middle;
}
.td-k{
    display: inline-block;
    vertical-align: middle;
    width: 80px;
}
.td-v{
    display: inline-block;
    vertical-align: middle;
    width: 250px;
}
.td-1{    
   display: inline-block;
    vertical-align: middle;
    width: 250px;
}
.td-k-1{
     display: inline-block;
    vertical-align: middle;
}
.tab-p{
    margin: 40px 0 0 0;
}
</style>
